<form (ngSubmit)="onSubmit($event)" #sendBurstForm="ngForm">

  <div class="action-container">
    <mat-checkbox labelPosition="before"
                  name="same-amount-checkbox"
                  class="same-amount"
                  [(ngModel)]="sameAmount"
    >{{ "same_out" | i18n }}?
    </mat-checkbox>
    <div class="button-wrapper">
      <button mat-icon-button type="button" (click)="resetRecipients()" matTooltip="{{'reset_recipients' | i18n}}">
        <mat-icon>delete_sweep</mat-icon>
      </button>
      <button mat-icon-button type="button" (click)="addBatchedRecipient($event)"
              matTooltip="{{'add_recipient_batch' | i18n}}">
        <mat-icon>unarchive</mat-icon>
      </button>
    </div>
  </div>

  <mat-form-field *ngIf="sameAmount">
    <input matInput [(ngModel)]="amount" name="amount" placeholder="{{ 'amount' | i18n }}">
  </mat-form-field>

  <div class="recipients-container">
    <small [class.no-balance]="hasRecipientsExceeded()">{{getRecipientCounter()}}</small>
    <div class="recipients-list">
      <ng-container *ngFor="let recipient of recipients; let i = index; trackBy: trackByIndex;" [attr.data-index]="i">
        <div class="recipients-item">
          <burst-recipient-input [recipientValue]="recipient.addressRaw"
                                 (recipientChange)="onRecipientChange($event, i)"
                                 [withQrCode]="false"></burst-recipient-input>
          <mat-form-field *ngIf="!sameAmount">
            <input matInput [(ngModel)]="recipient.amount"
                   name="amount{{i}}"
                   placeholder="{{ 'amount' | i18n }}"
            >
          </mat-form-field>
          <button *ngIf="isLastRecipientItem(i)" mat-icon-button type="button" (click)="addRecipient($event)"
                  matTooltip="{{'add_recipient' | i18n}}">
            <mat-icon color="accent">add_box</mat-icon>
          </button>
          <button *ngIf="this.recipients.length > 1" mat-icon-button type="button" (click)="removeRecipientItem(i)"
                  matTooltip="{{'add_recipient' | i18n}}">
            <mat-icon color="warn">clear</mat-icon>
          </button>
        </div>
      </ng-container>
    </div>
  </div>

  <mat-form-field>
    <input matInput [(ngModel)]="fee" name="fee" placeholder="{{ 'fee' | i18n }}">
  </mat-form-field>

  <burst-fee-selector [fees]="fees" [(feeNQT)]="fee"></burst-fee-selector>

  <div *ngIf="advanced">
    <mat-form-field>
      <label>{{ 'deadline_hours' | i18n }}</label>
      <input matInput [(ngModel)]="deadline" name="deadline" placeholder="{{ 'deadline_hours' | i18n }}">
    </mat-form-field>
  </div>
  <div class="send-button-wrapper">
    <mat-form-field class="message-text password-field" floatLabel="never" appearance="standard">
      <input type="password" matInput required placeholder="{{'enter_pin' | i18n}}" [(ngModel)]="pin" name="pin">
    </mat-form-field>

    <button class="send-button" mat-icon-button type="submit" aria-label="Send message"
            [disabled]="!canSubmit()">
      <ng-container *ngIf="!isSending">
        <mat-icon [class.enabled]="canSubmit() || false">send</mat-icon>
      </ng-container>
      <ng-container *ngIf="isSending">
        <mat-spinner diameter="20"></mat-spinner>
      </ng-container>
    </button>
  </div>

  <strong>Total:&nbsp;</strong>
  <span [class.no-balance]="!hasSufficientBalance()">{{ getTotal() | number: '1.0-6': this.language }} BURST</span> -
  <a (click)="advanced=!advanced"><em>{{ advanced ? "basic" : "advanced" | i18n }}</em></a>
  <br/><br/>

</form>
